<template>
    <div>
        <div class="header">
            <span>提现金额</span>
            <div class="money vux-1px-b">
                <span>¥</span><van-field v-model="money" placeholder="请输入提现金额" type="number" />
            </div>
            <p>可提现金额: {{maxWithdraw | money}} 元</p>
        </div>


        <van-cell-group style="margin-top: 10px;">
            <van-cell title="提现银行" :value="bankTypeName"  @click="popShow = true" is-link></van-cell>
            <van-field
                v-model="userCardNo"
                label="银行卡号"
                type="number"
                placeholder="请输入银行卡号"
            />
            <van-field
                v-model="bankName"
                label="支行名称"
                placeholder="请输入支行名称"
            />
            <van-field
                v-model="userRealName"
                label="真实姓名"
                placeholder="请输入真实姓名"
            />
        </van-cell-group>

        <van-button @click="submit" type="primary" style="width: 90%; margin: 20px auto 0 auto; display: block;">提现</van-button>

        <van-popup position="bottom" v-model="popShow">
            <van-picker :columns="bankList"  @cancel="popShow = false"  show-toolbar @confirm="bankChange"></van-picker>
        </van-popup>

        <van-popup position="bottom" v-model="passWordPop">
            <div style="height: 60vh;">
                <p class="tips">请输入支付密码</p>
                <van-password-input
                    :value="payPwd"
                    info="密码为 6 位数字"
                />

                <!-- 数字键盘 -->
                <van-number-keyboard
                    :show="passWordPop"
                    @input="onInput"
                    @delete="onDelete"
                />
            </div>
        </van-popup>

    </div>
</template>

<script>
import md5 from 'js-md5'
export default {
    name: 'withdrawal',
    data() {
        return {
            bankTypeName: '请选择银行',
            bankTypeId: '',
            userCardNo: '',
            bankName: '',
            userRealName: '',
            money: '',
            payPwd: '',

            passWordPop: false,
            popShow: false,
            accountId: '',

            bankList: [],

            maxWithdraw: 0,
        }
    },

    methods: {
        onInput(key) {
            this.payPwd = (this.payPwd + key).slice(0, 6);
            if (this.payPwd.length === 6) {
                this.submit();
            }
        },
        onDelete() {
            this.payPwd = this.payPwd.slice(0, this.payPwd.length - 1);
        },
        bankChange(self) {
            this.bankTypeId = self.value;
            this.bankTypeName = self.text;
            this.popShow = false;
        },
        getBase() {
            this.$http.post('/user/userWithdraw/front/getUserWithdrawParams', {
                accountId: this.accountId
            }).then(res => {
                if (res.status === 0) {
                    this.bankList = res.data.pickList.map(e => ({
                        text: e.picklistText,
                        value: e.picklistValue
                    }));

                    this.maxWithdraw = res.data.userAccountType.maxWithdraw


                } else {
                    this.$toast.fail(res.message);
                }
            })
        },

        submit() {
            if (this.money === '' || this.money == 0) {
                this.$toast('请输入正确的金额');
                return;
            }
            let money = this.money * 100;
            if (money > this.maxWithdraw) {
                this.$toast('您超过最大提现金额');
                return;
            }
            if (!this.bankTypeId) {
                this.$toast('请选择所属银行');
                return;
            }

            if (!this.userCardNo) {
                this.$toast('请输入银行卡号');
                return;
            }

            if (!this.bankName) {
                this.$toast('请输入支行信息');
                return;
            }

            if (!this.userRealName) {
                this.$toast('请输入真实姓名');
                return;
            }

            if (!this.payPwd) {
                this.passWordPop = true;
                return;
            }

            this.$http.post('/user/userWithdraw/front/addUserWithdraw', {
                accountId: this.accountId,
                amount: money,
                bankTypeId: this.bankTypeId,
                bankName: this.bankName,
                userCardNo: this.userCardNo,
                userRealName: this.userRealName,
                payPwd: md5(this.payPwd)
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('提现成功');
                    setTimeout(() => { this.$router.back()}, 700);
                } else {
                    this.$toast.fail(res.message);
                }
            })
        }
    },

    mounted() {
        this.accountId = this.$route.query.id;
        this.getBase();
    }
}
</script>

<style scoped lang="scss">
.header {
    background-color: #fff;
    padding: 15px 10px;
    padding-bottom: 0;
    span {
        color: rgba(0,0,0,.6);
        font-size: 14px;
    }
    .vux-1px-b:after {
        color: #ccc;
        border-color: #ccc;
    }
    .money {
        border-color: #ccc;
        display: flex;
        align-items: center;
        padding-top: 15px;
        padding-left: 10px;
        span {
            font-size: 16px;
        }
        /deep/ .van-field__control {
            font-size: 30px;
            color: #333;
        }
    }

    p {
        font-size: 14px;
        color: rgba(0,0,0,.6);
        line-height: 40px;
    }
}

.tips {
    text-align: center;
    padding: 30px 0;
    font-size: 14px;
    color: #666;
}
</style>
